<template>
  <div class="app-container">

    <!-- 表单弹出框 -->
<!--    <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%">-->
<!--      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">-->
<!--        <el-form-item label="商品名称" required prop="name">-->
<!--          <el-input v-model="ruleForm.name"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品积分" required prop="price">-->
<!--          <el-input v-model="ruleForm.price"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品描述" required prop="caption">-->
<!--          <el-input v-model="ruleForm.caption"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="图片地址" required prop="imageUrl">-->
<!--          <el-input v-model="ruleForm.imageUrl"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品库存" required prop="storage">-->
<!--          <el-input v-model="ruleForm.storage"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品总数量" required prop="total">-->
<!--          <el-input v-model="ruleForm.total"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="submitForm('ruleForm')">新建</el-button>-->
<!--          <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--        </el-form-item>-->
<!--      </el-form>-->

<!--      &lt;!&ndash; <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
<!--      </span>&ndash;&gt;-->
<!--    </el-dialog>-->
    <!-- 商品列表 -->
<!--    <el-card class="table-container">-->
<!--      <i class="el-icon-tickets"></i>-->
<!--      <span>数据列表</span>-->
<!--      <el-button type="primary" class="btn-add" @click="dialogVisible = true" size="small" style="float:right">添加</el-button>-->
<!--      <el-table-->
<!--        ref="productTable"-->
<!--        :data="list"-->
<!--        style="width: 100%"-->
<!--        @selection-change="handleSelectionChange"-->
<!--        v-loading="listLoading"-->
<!--        border-->
<!--      >-->
<!--      <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>-->
<!--        <el-table-column label="商品图片" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <img style="height: 80px" :src="scope.row.imageUrl" />-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="商品名称" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <p>{{scope.row.name}}</p>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="积分" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <p>{{scope.row.price}}</p>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="库存" align="center">-->
<!--          <template slot-scope="scope">{{scope.row.storage}}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="总量" align="center">-->
<!--          <template slot-scope="scope">{{scope.row.total}}</template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="操作" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-switch-->
<!--              v-model="scope.row.shown"-->
<!--              active-text="显示"-->
<!--              inactive-text="隐藏"-->
<!--              @change="handleChange(scope.row)"-->
<!--              :active-value="1"-->
<!--              :inactive-value="0"-->
<!--            ></el-switch>-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--      </el-table>-->
<!--    </el-card>-->
  </div>
</template>
<script>
export default {
  name: 'productList',
  data() {
    return {
      dialogVisible: false,
      // operateType: null,
      // listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      multipleSelection: [],
      productCateOptions: [],
      brandOptions: [],
      ruleForm: {
        name: '',
        price: '',
        caption: '',
        imageUrl: '',
        storage: '',
        total: ''
      },
      pid: '',
      onClose: '0'
    }
  },
  created() {
    this.getList()
  },
  watch: {
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const { data: res } = await this.$http.post('pro/productCreation', {
            name: this.ruleForm.name,
            price: this.ruleForm.price,
            caption: this.ruleForm.caption,
            imageUrl: this.ruleForm.imageUrl,
            storage: this.ruleForm.storage,
            total: this.ruleForm.total
          })
          if (res.code == 200) {
            this.$message.success('新建成功!')
            this.dialogVisible = false
            this.getList()
          }
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    getProductSkuSp(row, index) {
      if (index === 0) {
        return row.sp1
      } else if (index === 1) {
        return row.sp2
      } else {
        return row.sp3
      }
    },
    // 修改显示状态
    async handleChange(row) {
      const { data: res } = await this.$http.get('pro/productAlter', {
        params: {
          id: row.id,
          show: row.shown
        }
      })
      if (res.code == 200) {
        this.$message.success(res.message)
      }
    },
    // 获取商品列表
    async getList() {
      this.listLoading = true
      const { data: res } = await this.$http.post('pro/productsList')
      if (res.code == 200) {
        this.listLoading = false
        this.list = res.data
      } else {
        return this.$message.error('获取商品列表失败!')
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 添加商品
    handleAddProduct() {
      this.$router.push({ path: '/pms/addProduct' })
    },
    // 删除商品
    async productDeletion() {
      const { data: res } = await this.$http.get('pro/productDeletion', {
        params: {
          id: this.pid
        }
      })
      if (res.code == 200) {
        this.$message.success('删除成功')
        this.getList()
      }
    }
    // getBrandList() {
    //   fetchBrandList({pageNum: 1, pageSize: 100}).then(response => {
    //     this.brandOptions = [];
    //     let brandList = response.data.list;
    //     for (let i = 0; i < brandList.length; i++) {
    //       this.brandOptions.push({label: brandList[i].name, value: brandList[i].id});
    //     }
    //   });
    // },
    // getProductCateList() {
    //   fetchListWithChildren().then(response => {
    //     let list = response.data;
    //     this.productCateOptions = [];
    //     for (let i = 0; i < list.length; i++) {
    //       let children = [];
    //       if (list[i].children != null && list[i].children.length > 0) {
    //         for (let j = 0; j < list[i].children.length; j++) {
    //           children.push({label: list[i].children[j].name, value: list[i].children[j].id});
    //         }
    //       }
    //       this.productCateOptions.push({label: list[i].name, value: list[i].id, children: children});
    //     }
    //   });
    // },
    //     handleShowSkuEditDialog(index,row){
    //       this.editSkuInfo.dialogVisible=true;
    //       this.editSkuInfo.productId=row.id;
    //       this.editSkuInfo.productSn=row.productSn;
    //       this.editSkuInfo.productAttributeCategoryId = row.productAttributeCategoryId;
    //       this.editSkuInfo.keyword=null;
    //       fetchSkuStockList(row.id,{keyword:this.editSkuInfo.keyword}).then(response=>{
    //         this.editSkuInfo.stockList=response.data;
    //       });
    //       fetchProductAttrList(row.productAttributeCategoryId,{type:0}).then(response=>{
    //         this.editSkuInfo.productAttr=response.data.list;
    //       });
    //     },
    //     handleSearchEditSku(){
    //       fetchSkuStockList(this.editSkuInfo.productId,{keyword:this.editSkuInfo.keyword}).then(response=>{
    //         this.editSkuInfo.stockList=response.data;
    //       });
    //     },
    //     handleEditSkuConfirm(){
    //       if(this.editSkuInfo.stockList==null||this.editSkuInfo.stockList.length<=0){
    //         this.$message({
    //           message: '暂无sku信息',
    //           type: 'warning',
    //           duration: 1000
    //         });
    //         return
    //       }
    //       this.$confirm('是否要进行修改', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(()=>{
    //         updateSkuStockList(this.editSkuInfo.productId,this.editSkuInfo.stockList).then(response=>{
    //           this.$message({
    //             message: '修改成功',
    //             type: 'success',
    //             duration: 1000
    //           });
    //           this.editSkuInfo.dialogVisible=false;
    //         });
    //       });
    //     },
    //     handleSearchList() {
    //       this.listQuery.pageNum = 1;
    //       this.getList();
    //     },

    //     handleBatchOperate() {
    //       if(this.operateType==null){
    //         this.$message({
    //           message: '请选择操作类型',
    //           type: 'warning',
    //           duration: 1000
    //         });
    //         return;
    //       }
    //       if(this.multipleSelection==null||this.multipleSelection.length<1){
    //         this.$message({
    //           message: '请选择要操作的商品',
    //           type: 'warning',
    //           duration: 1000
    //         });
    //         return;
    //       }
    //       this.$confirm('是否要进行该批量操作?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(() => {
    //         let ids=[];
    //         for(let i=0;i<this.multipleSelection.length;i++){
    //           ids.push(this.multipleSelection[i].id);
    //         }
    //         switch (this.operateType) {
    //           case this.operates[0].value:
    //             this.updatePublishStatus(1,ids);
    //             break;
    //           case this.operates[1].value:
    //             this.updatePublishStatus(0,ids);
    //             break;
    //           case this.operates[2].value:
    //             this.updateRecommendStatus(1,ids);
    //             break;
    //           case this.operates[3].value:
    //             this.updateRecommendStatus(0,ids);
    //             break;
    //           case this.operates[4].value:
    //             this.updateNewStatus(1,ids);
    //             break;
    //           case this.operates[5].value:
    //             this.updateNewStatus(0,ids);
    //             break;
    //           case this.operates[6].value:
    //             break;
    //           case this.operates[7].value:
    //             this.updateDeleteStatus(1,ids);
    //             break;
    //           default:
    //             break;
    //         }
    //         this.getList();
    //       });
    //     },
    //     handleSizeChange(val) {
    //       this.listQuery.pageNum = 1;
    //       this.listQuery.pageSize = val;
    //       this.getList();
    //     },
    //     handleCurrentChange(val) {
    //       this.listQuery.pageNum = val;
    //       this.getList();
    //     },

    //     handlePublishStatusChange(index, row) {
    //       let ids = [];
    //       ids.push(row.id);
    //       this.updatePublishStatus(row.publishStatus, ids);
    //     },
    //     handleNewStatusChange(index, row) {
    //       let ids = [];
    //       ids.push(row.id);
    //       this.updateNewStatus(row.newStatus, ids);
    //     },
    //     handleRecommendStatusChange(index, row) {
    //       let ids = [];
    //       ids.push(row.id);
    //       this.updateRecommendStatus(row.recommandStatus, ids);
    //     },
    //     handleResetSearch() {
    //       this.selectProductCateValue = [];
    //       this.listQuery = Object.assign({}, defaultListQuery);
    //     },
    //     handleDelete(index, row){
    //       this.$confirm('是否要进行删除操作?', '提示', {
    //         confirmButtonText: '确定',
    //         cancelButtonText: '取消',
    //         type: 'warning'
    //       }).then(() => {
    //         let ids = [];
    //         ids.push(row.id);
    //         this.updateDeleteStatus(1,ids);
    //       });
    //     },
    //     handleUpdateProduct(index,row){
    //       this.$router.push({path:'/pms/updateProduct',query:{id:row.id}});
    //     },
    //     handleShowProduct(index,row){
    //       console.log("handleShowProduct",row);
    //     },
    //     handleShowVerifyDetail(index,row){
    //       console.log("handleShowVerifyDetail",row);
    //     },
    //     handleShowLog(index,row){
    //       console.log("handleShowLog",row);
    //     },
    //     updatePublishStatus(publishStatus, ids) {
    //       let params = new URLSearchParams();
    //       params.append('ids', ids);
    //       params.append('publishStatus', publishStatus);
    //       updatePublishStatus(params).then(response => {
    //         this.$message({
    //           message: '修改成功',
    //           type: 'success',
    //           duration: 1000
    //         });
    //       });
    //     },
    //     updateNewStatus(newStatus, ids) {
    //       let params = new URLSearchParams();
    //       params.append('ids', ids);
    //       params.append('newStatus', newStatus);
    //       updateNewStatus(params).then(response => {
    //         this.$message({
    //           message: '修改成功',
    //           type: 'success',
    //           duration: 1000
    //         });
    //       });
    //     },
    //     updateRecommendStatus(recommendStatus, ids) {
    //       let params = new URLSearchParams();
    //       params.append('ids', ids);
    //       params.append('recommendStatus', recommendStatus);
    //       updateRecommendStatus(params).then(response => {
    //         this.$message({
    //           message: '修改成功',
    //           type: 'success',
    //           duration: 1000
    //         });
    //       });
    //     },
    //     updateDeleteStatus(deleteStatus, ids) {
    //       let params = new URLSearchParams();
    //       params.append('ids', ids);
    //       params.append('deleteStatus', deleteStatus);
    //       updateDeleteStatus(params).then(response => {
    //         this.$message({
    //           message: '删除成功',
    //           type: 'success',
    //           duration: 1000
    //         });
    //       });
    //       this.getList();
    //     }
  }
}
</script>
<style></style>
